<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap工具类</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main {
        margin: 20px;
    }
</style>

<body>
    <main>
        <!-- 关闭图标 -->
        <button type="button" class="close" aria-label="关闭">
            <span>&times</span>
        </button>

        <!-- clearfix 取消因浮动造成的布局错误 -->
        <div class="bg-info clearfix">
            <button type="button" class="btn btn-success float-left m-2"></button>
            <button type="button" class="btn btn-success float-right m-2"></button>
        </div>

        <br>

        <span class="align-baseline">baseline</span>
        <span class="align-top">top</span>
        <span class="align-middle">middle</span>
        <span class="align-bottom">bottom</span>
        <span class="align-text-top">text-top</span>
        <span class="align-text-bottom">text-bottom</span>

        <table style="height: 100px;">
            <tbody>
                <tr>
                    <td class="align-baseline">baseline</td>
                    <td class="align-top">top</td>
                    <td class="align-middle">middle</td>
                    <td class="align-bottom">bottom</td>
                    <td class="align-text-top">text-top</td>
                    <td class="align-text-bottom">text-bottom</td>
                </tr>
            </tbody>
        </table>

        <br>

        <div class="shadow-none p-3 mb-5 bg-light rounded">无阴影</div>
        <div class="shadow-sm p-3 mb-5 bg-white rounded">小阴影</div>
        <div class="shadow p-3 mb-5 bg-white rounded">一般阴影</div>
        <div class="shadow-lg p-3 mb-5 bg-white rounded">大阴影</div>

        <br>

        <div class="d-inline p-2 bg-primary text-white">d-inline</div>
        <div class="d-inline p-2 bg-dark text-white">d-inline</div>
        
        <br/>
        
        <span class="d-block p-2 bg-primary text-white">d-block</span>
        <span class="d-block p-2 bg-dark text-white">d-block</span>
    </main>


    <script src="../js/bootstrap.js"></script>
</body>

</html>